<!DOCTYPE HTML>
<html lang="en">
<head>
  <meta charset="utf-8">

  <title>JSONEditor | Auto-completion by schema</title>

  <link href="../dist/jsoneditor.css" rel="stylesheet" type="text/css">
  <script src="../dist/jsoneditor.js"></script>

  <style type="text/css">
    body {
      width: 600px;
      font: 11pt sans-serif;
    }
    #jsoneditor {
      width: 100%;
      height: 500px;
    }

    /* custom bold styling for non-default JSON schema values */
    .jsoneditor-is-not-default {
      font-weight: bold;
    }
  </style>
</head>
<body>
<h1>JSON autocompletion by schema</h1>
<p>
  This example demonstrates JSON autocompletion by schema. try to change the JSON properties and values and you'll get a suggestions that are based on the schema properties, examples and enums. 
</p>
<p>
  See <a href="http://json-schema.org/" target="_blank">http://json-schema.org/</a> for more information.
</p>

<div id="jsoneditor"></div>

<script>
  const schema = {
    "title": "Employee",
    "description": "Object containing employee details",
    "type": "object",
    "properties": {
      "firstName": {
        "title": "First Name",
        "description": "The given name.",
        "examples": [
          "John"
        ],
        "type": "string"
      },
      "lastName": {
        "title": "Last Name",
        "description": "The family name.",
        "examples": [
          "Smith"
        ],
        "type": "string"
      },
      "gender": {
        "title": "Gender",
        "type": "string",
        "enum": ["male", "female"],
        "examples": ["male", "female"],
      },
      "availableToHire": {
        "type": "boolean",
        "default": false
      },
      "age": {
        "description": "Age in years",
        "type": "integer",
        "minimum": 0,
        "examples": [28, 32]
      },
      "job": {
        "$ref": "job"
      },
      "profession": {
        "oneOf": [
          {
            "$ref": "junior"
          },
          {
            "$ref": "experienced"
          },
          {
            "$ref": "senior"
          },
        ]
      },
      "publications": {
        "type": "array",
        "items": {
          "type": "object",
          "properties": {
            "type": {
              "type": "string",
              "enum": ["academic", "professional"]
            },
            "journal": {
              "type": "string"
            }
          }
        }
      }
    },
    "required": ["firstName", "lastName"]
  }

  const job = {
    "title": "Job description",
    "type": "object",
    "required": ["address"],
    "properties": {
      "company": {
        "type": "string",
        "examples": [
          "ACME",
          "Dexter Industries"
        ]
      },
      "role": {
        "description": "Job title.",
        "type": "string",
        "examples": [
          "Human Resources Coordinator",
          "Software Developer"
        ],
        "default": "Software Developer"
      },
      "address": {
        "type": "string"
      },
      "salary": {
        "type": "number",
        "minimum": 120,
        "examples": [100, 110, 120]
      }
    }
  }

  const junior = {
    "type": "object",
    "properties": {
      "level": {
      "type": "string",
      "enum": ["junior"]
      },
      "experience": {
        "description": "years of experience",
        "type": "number",
        "minimum": 0,
        "maximum": 3,
        "examples": [0,1,2,3]
      }
    }
  }

  const experienced = {
    "type": "object",
    "properties": {
      "level": {
        "type": "string",
        "enum": ["experienced"]
      },
      "experience": {
        "description": "years of experience",
        "type": "number",
        "minimum": 3,
        "maximum": 7,
        "examples": [3,4,5,6,7]
      }
    }
  }

  const senior = {
    "type": "object",
    "properties": {
      "level": {
        "type": "string",
        "enum": ["senior"]
      },
      "experience": {
        "description": "years of experience",
        "type": "number",
        "minimum": 7,
        "examples": [7,8,9,10,11]
      }
    }
  }

  const json = {
    firstName: "John",
    lastName: "Doe",
    gender: "male",
    age: 28,
    availableToHire: true,
    job: {
      company: "freelance",
      role: "developer",
      salary: 140,
      address: "Jerusalem"
    },
    profession: {
      level: "senior",
      experience: 10
    },
    publications: [{
      type: 'academic',
      journal: 'MIT today'
    },
    {
      type: 'professional',
      journal: 'stack overflow'
    }]
  }

  const options = {
    schema: schema,
    schemaRefs: {job: job, junior: junior, experienced: experienced, senior: senior},
    allowSchemaSuggestions: true,
    mode: 'code',
    modes: ['code']
  }

  // create the editor
  const container = document.getElementById('jsoneditor')
  const editor = new JSONEditor(container, options, json)
  schema.properties.firstName.examples.push('David');
  editor.setSchema(schema, {job: job, junior: junior, experienced: experienced, senior: senior});
</script>
</body>
</html>
